<template>
    <div class="right-btn">
        <div class="tip service">
            <div class="hide">15611433863</div>
        </div>
        <div class="tip qq" >
            <div class="hide">1036179277</div>
        </div>
        <div class=" tip return" v-show='goTopShow' @click="gotop"></div>
    </div>
</template>
<script>
    export default {
        name: 'Rightbtn',
        data(){
            return{
                goTopShow:false
            }
        } , 
        mounted(){
            window.addEventListener('scroll',this.showGoTop)
            // console.log(window)
        },
        methods:{
            gotop(){
                head.scrollIntoView()
            },
            showGoTop(){
                if(window.scrollY>300){
                    // console.dir(this.$refs.gotop)
                    // this.$refs.gotop.style.opacity=1
                    this.goTopShow=true
                }else{
                    this.goTopShow=false
                    // this.$refs.gotop.style.opacity=0
                }
            }
        }
    }

</script>
<style scoped>
    .right-btn {
        width: 70px;
        height: 300px;
        position: fixed;
        right: 0;
        bottom: 100px;
    }

    .tip {
        width: 100%;
        height: 30%;
        border-radius: 4px;
        position: relative;
        background: url(../assets/home_icon1.png) no-repeat center center/450px 700px;
    }

    .service {
        background-position: -201px -110px;
    }

    .qq {
        background-position: -201px -18px;
    }

    .return {
        background-position: -20px -110px;
    
    }

    .tip:hover .hide {
        display: block;
    }

    .hide {
        width: 180px;
        height: 75px;
        background-color: #ffa631;
        position: absolute;
        top: 2px;
        left: -190px;
        color: #fff;
        text-align: center;
        line-height: 75px;
        font-size: 20px;
        border-radius: 4px;
        display: none;
    }

    .hide:after {
        content: '';
        display: inline-block;
        border-left: 10px solid #ffa631;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        position: absolute;
        top: 28px;
        left: 180px;
    }

    .service:hover {
        background-position: -290px -110px;
    }

    .qq:hover {
        background-position: -290px -18px;
    }
</style>